<!--
  作者：xhr
  时间：2022年08月19日 13:25:07
-->
<template>
    <div class="wai" style="width: 100%; height: 100vh; background-color: aqua; overflow: hidden">
        <div style="width: 400px; margin: 150px auto">
            <div style="
          font-size: 30px;
          color: rgb(64,158,255);
          text-align: center;
          margin: 30px 0;
        ">
                欢迎注册
            </div>
            <el-form size="normal" :model="form" :rules="rules" ref="form">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item prop="confirm">
                    <el-input prefix-icon="el-icon-lock" v-model="form.confirm" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-model="form.username" type="primary" style="width: 100%" @click="register">注册
                    </el-button>
                </el-form-item>
                <!-- <el-form-item >
          <el-button v-model="form.username" type='primary' style="width:100%">注册</el-button>
          
        </el-form-item> -->
            </el-form>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
export default {
    name: "Register",
    data() {
        return {
            form: {},

            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },

                ],
                confirm: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },

                ],
            }
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        register() {
            //判断两次密码
            if (this.form.password !== this.form.confirm) {
                this.$message({
                    type: "error",
                    message: "两次密码不一致",
                })
                return
            }
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.form.role=2;
                    request.post("/user/register", this.form).then((res) => {
                        if (res.code === "0") {
                            this.$message({
                                type: "success",
                                message: "注册成功",
                            });
                            this.$router.push("/login");
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                            });
                        }
                    });
                }
            });
        },
    },
};
</script>

<style scoped>
.wai {
    background: url(@/assets/2244.jpg) no-repeat;
    background-size: 100% 100%;
}
</style>
